<template>
	<div class="about">
		<Nav activeIndex="AboutView"></Nav>
		<section class="container content overflow">
			<editor v-if="content.length>0" :value="content" :enable="false"></editor>
		</section>
		<Footer></Footer>
	</div>
</template>
<script>
	import Nav from '../components/Nav.vue'
	import Footer from '../components/Footer.vue'
	import Editor from '../components/editor.vue'
	import {
		mapState
	} from "vuex"
	export default {
		name: 'AboutView',
		components: {
			Nav,
			Footer,
			Editor
		},
		data() {
			return {
				content: ""
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		created() {
			this.getaboutinfo();
		},
		methods: {
			async getaboutinfo() {
				let {
					data
				} = await this.$axios.get(
					'/blog/users/getabout?userid=' + this.userinfo.id);
				this.content = data.data[0].about;
			}
		}
	}
</script>

<style lang="less" scoped>
	.about {
		height: 100%;

		.container {
			max-width: 1200px;
			min-height: 827px;
			margin: 0 auto 10px;
		}

		.content {

			h2,
			h3 {
				font-size: 150%;
				margin: 20px 0;
			}

			p {
				color: #555;
				line-height: 30px;
				letter-spacing: 2px;
			}
		}
	}
</style>
